<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
	<div class="execution">
		<basic-container>
			<div class="personalident_top">
				<label>学习包：</label>
				<el-input
					class="personalident_topinput"
					clearable
					v-model="name"
					placeholder="请输入学习包名称"
				></el-input>
				<label>学习人员：</label>
				<el-select
					class="learn-select"
					clearable
					filterable
					multiple
					v-model="value1"
					placeholder="请选择人员"
				>
					<el-option
						v-for="item in option1"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					></el-option>
				</el-select>
				<label>开始时间：</label>
				<el-date-picker
					class="learn-date"
					v-model="startTime"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期范围"
					end-placeholder="结束日期范围"
				></el-date-picker>
				<el-button
					class="firmident_topbtn"
					@click="queryList(list)"
					type="primary"
				>搜索
				</el-button
				>
			</div>

			<!-- 新增学习包弹窗 -->
			<el-button type="primary" @click="dialogVisibleClick"
			>新增学习包
			</el-button
			>
			<el-drawer
				title="新增学习包"
				:visible.sync="dialogVisible"
				:before-close="closedialog"
				direction="rtl"
				size="60%"
			>
				<el-form
					ref="form1"
					:model="ruleForm"
					:rules="rules"
					v-loading="loadingbut"
					label-width="140px"
				>
					<el-form-item label="学习包封面">
						<el-upload
							:limit="1"
							ref="cover"
							list-type="picture-card"
							class="avatar-uploader"
							:file-list="ruleForm.cover"
							:model="ruleForm.cover"
							:headers="upHeader"
							action="/fastfile/upload/hsh-1251035051"
							accept="image/png, image/jpeg"
							:on-success="handleAvatarSuccess"
							:on-exceed="handleExceed"
							:before-upload="beforeAvatarUpload"
						>
							<i class="el-icon-plus avatar-uploader-icon"></i>
							<div slot="tip" class="el-upload__tip">
								上传图片不超过500kb，建议尺寸180*260
							</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="学习包名称" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					<el-form-item label="学习包简介" prop="introduction">
						<el-input
							type="textarea"
							v-model="ruleForm.introduction"
						></el-input>
					</el-form-item>

					<div style="margin-bottom: 20px; color: #666">课程信息</div>
					<div class="articleList">
						<div class="articleList-one1">
							<div style="width: 50px"></div>
							<div>文章标题</div>
							<div>文章属性</div>
							<div>文章阅读时长</div>
							<div>上传者</div>
							<div>排序</div>
						</div>

						<transition-group name="flip-list">
							<div
								v-for="(item, index) in articleObj.data"
								class="articleList-one"
								@click="lookArticle1($event, item)"
								:id="index"
								:class="{ active: oldVal == item && isActive == item }"
								:key="item"
								draggable="true"
								@dragstart="dragstart(item)"
								@dragenter="dragenter(item)"
								@dragend="dragend(item)"
							>
								<div
									class="articleList-icon articleList-icon1"
									style="width: 50px"
									@click.stop="removeArticle1(index)"
								>
									<i
										style="color: #f27c88; font-size: 24px"
										class="el-icon-error"
									></i>
								</div>
								<div class="article-title" v-if="item.title">
									{{ item.title }}
								</div>
								<div v-else>&nbsp;</div>
								<div v-if="item.dynamicType === 1">文章</div>
								<div v-if="item.dynamicType === 2">视频</div>
								<div v-if="item.dynamicType === 3">音频</div>
								<div v-if="item.dynamicType === 4">知识库内容</div>
								<div v-if="item.dynamicType === 5">文件</div>
								<div v-if="item.dynamicType === 1">{{ item.time }}(分)</div>
								<div v-else>{{ item.time }}(秒)</div>
								<div v-if="item.uname">{{ item.uname }}</div>
								<div v-else>管理员</div>
								<div class="articleList-icon">
									<i style="font-size: 24px" class="el-icon-rank"></i>
								</div>
							</div>
						</transition-group>
						<el-drawer
							title="知识详情"
							:visible.sync="articledetail1"
							append-to-body
							direction="rtl"
							size="60%"
						>
							<el-form-item label="所属学习包：">{{
									updateLearnObj.name
								}}
							</el-form-item>

							<avue-form
								:option="formOption1"
								ref="form3"
								v-model="learnArticleDetail"
								@submit="submit3"
							></avue-form>
						</el-drawer>
						<el-button
							style="width: 80%; height: 40px; margin-bottom: 10px"
							@click="dialogShow = true"
							type="primary"
						>新增/选择文章
						</el-button
						>
					</div>
					<!-- 文章弹窗 -->
					<el-drawer
						direction="rtl"
						size="60%"
						title="新增文章"
						:visible.sync="dialogShow"
						append-to-body
						:before-close="closedialog1"
					>
						<el-form-item v-model="ruleForm" label="所属学习包：">{{
								this.ruleForm.name
							}}
						</el-form-item>
						<div v-if="formForm.dynamicType === 4">
							<el-form-item label="文章标题：">{{
									knowledgeObj.title
								}}
							</el-form-item>
							<div v-if="knowledgeObj.dynamicType === 1">
								<el-form-item label="是否可复制：">
									<div v-if="knowledgeObj.isCopy == 1">是</div>
									<div v-if="knowledgeObj.isCopy == 2">否</div>
								</el-form-item>
								<el-form-item label="知识详情：">
									<div
										v-if="knowledgeObj.content"
										v-html="knowledgeObj.content"
									>
										{{ knowledgeObj.content }}
									</div>
								</el-form-item>
								<el-form-item
									v-if="knowledgeObj.time >= 1"
									label-width="120px"
									label="最低阅读时长："
								>{{ knowledgeObj.time }}(分钟)
								</el-form-item
								>
								<el-form-item
									v-if="knowledgeObj.time < 1"
									label-width="120px"
									prop="time"
									label="最低阅读时长："
								>
									<el-input v-model="newTime" autocomplete="off"></el-input>
								</el-form-item>
							</div>
							<div v-if="knowledgeObj.dynamicType === 2">
								<el-form-item label="是否可复制：">
									<div v-if="knowledgeObj.isCopy == 1">是</div>
									<div v-if="knowledgeObj.isCopy == 2">否</div>
								</el-form-item>
								<el-form-item label="视频封面：">
									<img :src="knowledgeObj.cover" class="knowledgeObj-img" alt/>
								</el-form-item>
								<el-form-item label="视频：">
									<video
										class="knowledgeObj-video"
										controls
										:src="knowledgeObj.video"
										alt
									></video>
								</el-form-item>
								<el-form-item label="视频简介：">{{
										knowledgeObj.introduction
									}}
								</el-form-item>
							</div>
							<div v-if="knowledgeObj.dynamicType === 3">
								<el-form-item label="音频：">
									<audio :src="knowledgeObj.audio" alt></audio>
								</el-form-item>
								<el-form-item label="音频简介：">{{
										knowledgeObj.introduction
									}}
								</el-form-item>
							</div>
						</div>
						<!-- 新增学习包知识详情 -->
						<avue-form
							:option="formOption"
							ref="form4"
							v-model="formForm"
							@submit="submit"
						></avue-form>
					</el-drawer>

					<el-form-item
						label-width="170px"
						prop="isSort"
						label="文章是否按顺序学习："
					>
						<el-radio v-model="ruleForm.isSort" label="1">是</el-radio>
						<el-radio el-radio v-model="ruleForm.isSort" label="2">否</el-radio>
					</el-form-item>
<!--					<el-form-item
						label-width="170px"
						prop="close"
						label="近期课程："
					>
						<el-radio v-model="ruleForm.close" :label="1">是</el-radio>
						<el-radio el-radio v-model="ruleForm.close" :label="2"
						>否
						</el-radio
						>
					</el-form-item>-->
					<el-form-item>
						<el-button type="primary" @click="onSubmit">立即创建</el-button>
						<!-- <el-button  @click="dialogVisible = false">取消</el-button> -->
					</el-form-item>
				</el-form>
			</el-drawer>
			<!-- 学习包知识库文章表格弹窗 -->
			<el-drawer
				direction="rtl"
				size="60%"
				title="选择文章"
				:visible.sync="articleTableDialog"
				append-to-body
				:before-close="articleTabledia"
			>
				<avue-crud
					ref="crud"
					:page="page1"
					:data="articleTableData"
					:permission="permissionList"
					:table-loading="articleTableLoading"
					:option="articleTableDataOption"
					v-model="articleForm"
					@on-load="getList"
					@size-change="sizeChange"
					@current-change="currentChange"
					@selection-change="selectionChange"
				></avue-crud>
				<el-button type="primary" @click="articleTable">确定</el-button>
			</el-drawer>
			<!-- 学习包列表 -->
			<div class="learn-content">
				<template v-for="(item, index) in list">
					<div class="learn-one">
						<div class="picBox">
							<img :src="item.cover"/>
						</div>
						<div class="learn-name">
							{{ item.name }}
							<p class="learn-dec">共{{ item.count }}节课</p>
						</div>
						<div class="learn-pop">
							<div class="learn-popTop" @click="updateLearn(item)">
								学习包详情
							</div>
							<div class="learn-popBot" @click="removeLearn(item)">
								删除学习包
							</div>
						</div>
					</div>
				</template>
			</div>
			<el-drawer
				direction="rtl"
				size="60%"
				title="学习包详情"
				:visible.sync="learnShow"
				append-to-body
				:before-close="closedialog5"
			>
				<el-form
					v-loading="formLoading"
					ref="form2"
					:model="updateLearnObj"
					:rules="rules"
					label-width="180px"
				>
					<el-form-item label="学习包封面">
						<el-upload
							:limit="1"
							ref="cover"
							list-type="picture-card"
							class="avatar-uploader"
							:model="updateLearnObj.cover"
							:headers="upHeader"
							action="/fastfile/upload/hsh-1251035051"
							accept="image/png, image/jpeg"
							:on-success="handleAvatarSuccess"
							:on-exceed="handleExceed"
							:before-upload="beforeAvatarUpload"
						>
							<img
								v-if="updateLearnObj.cover"
								width="178px"
								height="178px"
								:src="updateLearnObj.cover"
							/>
							<div slot="tip" class="el-upload__tip">
								上传图片不超过500kb，建议尺寸180*260
							</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="学习包名称" prop="name">
						<el-input v-model="updateLearnObj.name"></el-input>
					</el-form-item>
					<el-form-item label="学习包简介" prop="introduction">
						<el-input
							type="textarea"
							v-model="updateLearnObj.introduction"
						></el-input>
					</el-form-item>
					<div style="margin-bottom: 20px; color: #666;padding-left:20px;">课程信息</div>
					<div class="articleList">
						<div class="articleList-one1">
							<div style="width: 50px"></div>
							<div>文章标题</div>
							<div>文章属性</div>
							<div>文章阅读时长</div>
							<div>上传者</div>
							<div>排序</div>
						</div>
						<transition-group name="flip-list">
							<div
								v-for="(item, index) in circleDynamicListObj"
								:key="item"
								@click="lookArticle($event, item)"
								:id="index"
								class="articleList-one"
								:class="{ active: oldVal1 == item && isActive1 == item }"
								draggable="true"
								@dragstart="dragstart1(item)"
								@dragenter="dragenter1(item)"
								@dragend="dragend1(item)"
							>
								<div
									class="articleList-icon articleList-icon1"
									style="width: 50px"
									@click.stop="removeArticle($event, item)"
									:id="index"
								>
									<i
										style="color: #f27c88; font-size: 24px"
										class="el-icon-error"
									></i>
								</div>
								<div class="article-title" v-if="item.title">
									{{ item.title }}
								</div>
								<div v-else>&nbsp;</div>
								<div v-if="item.dynamicType === 1">文章</div>
								<div v-if="item.dynamicType === 2">视频</div>
								<div v-if="item.dynamicType === 3">音频</div>
								<div v-if="item.dynamicType === 4">知识库内容</div>
								<div v-if="item.dynamicType === 5">文件</div>
								<div v-if="item.dynamicType === 1">{{ item.time }}(分)</div>
								<div v-else>{{ item.time }}(秒)</div>
								<div v-if="item.uname">{{ item.uname }}</div>
								<div v-else>管理员</div>
								<div class="articleList-icon">
									<i style="font-size: 24px" class="el-icon-rank"></i>
								</div>
							</div>
						</transition-group>
						<!-- 知识详情弹窗 -->
						<el-drawer
							direction="rtl"
							size="60%"
							title="知识详情"
							:visible.sync="articledetail"
							append-to-body
							:before-close="closedialog3"
						>
							<el-form-item label="所属学习包：">{{
									updateLearnObj.name
								}}
							</el-form-item>
							<avue-form
								:option="formOption1"
								ref="form5"
								v-model="learnArticleDetail"
								@submit="submit2"
							></avue-form>
						</el-drawer>
						<el-button
							style="width: 80%; height: 40px; margin-bottom: 10px"
							@click="dialogShow1 = true"
							type="primary"
						>新增/选择文章
						</el-button
						>
					</div>
					<!-- 文章弹窗 -->
					<el-drawer
						direction="rtl"
						size="60%"
						title="新增文章"
						:visible.sync="dialogShow1"
						append-to-body
						:before-close="closedialog2"
					>
						<el-form-item v-model="updateLearnObj" label="所属学习包：">{{
								this.updateLearnObj.name
							}}
						</el-form-item>
						<div v-if="formForm.dynamicType === 4">
							<el-form-item label="文章标题：">{{
									knowledgeObj.title
								}}
							</el-form-item>
							<div v-if="knowledgeObj.dynamicType === 1">
								<el-form-item label="是否可复制：">
									<div v-if="knowledgeObj.isCopy == 1">是</div>
									<div v-if="knowledgeObj.isCopy == 2">否</div>
								</el-form-item>
								<el-form-item label="知识详情：">
									<div
										v-if="knowledgeObj.content"
										v-html="knowledgeObj.content"
									>
										{{ knowledgeObj.content }}
									</div>
								</el-form-item>
								<el-form-item
									v-if="knowledgeObj.time >= 1"
									label-width="120px"
									label="最低阅读时长："
								>{{ knowledgeObj.time }}(分钟)
								</el-form-item
								>
								<el-form-item
									v-if="knowledgeObj.time < 1"
									label-width="120px"
									prop="time"
									label="最低阅读时长："
								>
									<el-input v-model="newTime" autocomplete="off"></el-input>
								</el-form-item>
							</div>
							<div v-if="knowledgeObj.dynamicType === 2">
								<el-form-item label="是否可复制：">
									<div v-if="knowledgeObj.isCopy == 1">是</div>
									<div v-if="knowledgeObj.isCopy == 2">否</div>
								</el-form-item>
								<el-form-item label="视频封面：">
									<img :src="knowledgeObj.cover" class="knowledgeObj-img" alt/>
								</el-form-item>
								<el-form-item label="视频：">
									<video
										class="knowledgeObj-video"
										controls
										:src="knowledgeObj.video"
										alt
									></video>
								</el-form-item>
								<el-form-item label="视频简介：">{{
										knowledgeObj.introduction
									}}
								</el-form-item>
							</div>
							<div v-if="knowledgeObj.dynamicType === 3">
								<el-form-item label="音频：">
									<audio :src="knowledgeObj.audio" alt></audio>
								</el-form-item>
								<el-form-item label="音频简介：">{{
										knowledgeObj.introduction
									}}
								</el-form-item>
							</div>
						</div>

						<avue-form
							:option="formOption"
							ref="form6"
							v-model="formForm"
							@submit="submit1"
						></avue-form>
					</el-drawer>

					<el-form-item
						label-width="170px"
						prop="isSort"
						label="文章是否按顺序学习："
					>
						<el-radio v-model="updateLearnObj.isSort" :label="1">是</el-radio>
						<el-radio el-radio v-model="updateLearnObj.isSort" :label="2"
						>否
						</el-radio
						>
					</el-form-item>
<!--					<el-form-item
						label-width="170px"
						prop="close"
						label="近期课程："
					>
						<el-radio v-model="updateLearnObj.close" :label="1">是</el-radio>
						<el-radio el-radio v-model="updateLearnObj.close" :label="2"
						>否
						</el-radio
						>
					</el-form-item>-->
					<el-form-item>
						<el-button type="primary" @click="updateSub(updateLearnObj)"
						>确认修改
						</el-button
						>
						<el-button @click="learnShow = false">取消</el-button>
					</el-form-item>
				</el-form>
			</el-drawer>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page.currentPage"
				:total="page.total"
				:page-size="page.pageSize"
				:page-sizes="[5, 10, 20, 50, 100]"
				background
				style="padding: 30px 0; text-align: center"
				layout="total, sizes, prev, pager, next"
			></el-pagination>

			<!--  <avue-crud ref="crud"
				  :page="page"
				  :data="tableData"
				  :permission="permissionList"
				  :table-loading="tableLoading"
				  :option="tableOption"
				  @on-load="getList"
				  @search-change="searchChange"
				  @refresh-change="refreshChange"
				  @size-change="sizeChange"
				  @current-change="currentChange"
				  @row-update="handleUpdate"
				  @row-save="handleSave"
				  @row-del="rowDel">
			</avue-crud>-->
		</basic-container>
	</div>
</template>
<style lang="scss">
.el-drawer__body {
	overflow: auto;
	/* overflow-x: auto; */
}

/*2.隐藏滚动条，太丑了*/
.el-drawer__container ::-webkit-scrollbar {
	display: none;
}

.el-drawer {
	padding-left: 20px;
}

.el-form-item__content img {
	max-width: 800px;
}

.el-upload--picture-card {
	width: 178px;
	height: 178px;
	/* line-height: 146px; */
}

.avatar-uploader-icon {
	width: 146px;
	height: 146px;
	line-height: 146px;
}

.disabled .el-upload--picture-card {
	display: none;
}

.knowledgeObj-img {
	max-width: 220px;
}

.knowledgeObj-video {
	max-width: 600px;
	max-height: 340px;
}

.articleList {
	// width: 80%;
	padding-left: 180px;
	padding-top: 20px;
	color: #666;
	font-size: 14px;
}

.articleList-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: move;
}

.articleList-icon1 {
	cursor: pointer;
}

/* .articleList-title{
    min-width: 200px;
    max-width: 1100px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.articleList-title div{
    width: 18%;
    text-align: center;
} */
.articleList-one1 {
	width: 80%;
	height: 50px;
	line-height: 50px;
	border-radius: 10px;
	display: flex;
	margin-bottom: 10px;
}

.flip-list-move {
	transition: transform 0.3s ease-in;
}

.articleList-one {
	width: 80%;
	height: 50px;
	line-height: 50px;
	border: 1px solid #dedede;
	border-radius: 10px;
	display: flex;
	margin-bottom: 10px;
}

.articleList-one.active {
	/* background: rgba(0, 0, 0, 0.4); */
}

.articleList-one1 div {
	width: 18%;
	text-align: center;
}

.articleList-one div {
	width: 18%;
	text-align: center;
}

.el-dialog {
	width: 80%;
}

.add {
	padding-left: 30px;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.personalident_top {
	margin-bottom: 20px;
}

.personalident_topinput {
	width: 200px;
	margin-right: 30px;
}

.learn-select {
	margin-right: 20px;
}

.add-select {
	margin-right: 20px;
}

.learn-date {
	margin-right: 20px;
}

.learn-content {
	width: 1410px;
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
}

.learn-one {
	width: 186px;
	margin-right: 60px;
	position: relative;
	cursor: pointer;

	.picBox {
		position: relative;
		width: 100%;
		height: 260px;
		margin-bottom: 15px;
	}

	img {
		border-radius: 8px;
		overflow: hidden;
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		left: 0;
		top: 0;
		right: 0;
	}
}

.learn-one:hover .learn-pop {
	display: block;
}

.learn-pop {
	position: absolute;
	top: 0;
	left: 0;
	width: 186px;
	height: 260px;
	background: rgba(0, 0, 0, 0.76);
	border-radius: 8px;
	display: none;
}

.learn-popTop {
	width: 126px;
	height: 38px;
	text-align: center;
	line-height: 38px;
	color: #fff;
	margin: 0 auto;
	border: 1px solid #fff;
	margin-top: 85px;
	margin-bottom: 20px;
	border-radius: 4px;
}

.learn-popBot {
	width: 126px;
	height: 38px;
	text-align: center;
	line-height: 38px;
	color: #fa5080;
	margin: 0 auto;
	border: 1px solid #fa5080;
	border-radius: 4px;
}

.learn-one:nth-child(5) {
	margin-right: 0;
}

.learn-one:nth-child(10) {
	margin-right: 0;
}

.learn-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	font-size: 18px;
	color: #333;
}

.article-title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

.learn-dec {
	font-size: 14px;
	color: #999;
	font-weight: normal;
	margin: 10px 0 20px;
}

.learn-one img {
	width: 186px;
	height: 260px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	background: #f6f6f6;
}
</style>
<script>
import {
	fetchList,
	fetchList1,
	getObj,
	addObj,
	putObj,
	delObj
} from "@/api/circlelearningbackage";
import {
	tableOption,
	articleTableDataOption
} from "@/const/crud/circlelearningbackage";
import {mapGetters} from "vuex";
import AvueUeditor from "avue-plugin-ueditor";
import store from "@/store"; // progress bar style
export default {
	name: "circlelearningbackage",
	data() {
		let vm = this;
		return {
			dialogFlag: false,
			dialogFlag1: false,
			dialogFlag2: false,
			dialogFlag3: false,
			dialogFlag4: false,
			dialogFlag5: false,
			// 新建学习包提交按钮防重提交
			loadingbut: false,
			formLoading: false,
			//学习包详情修改新建文章索引
			articleIndex: "",
			articleIndex1: "",
			isActive: 0,
			oldVal: 0,
			newOld: 0,
			isActive1: 0,
			oldVal1: 0,
			newOld1: 0,
			//新增学习包新增知识库文章表格弹窗
			articleTableDialog: false,
			articleTableDataOption: articleTableDataOption,
			articleTableData: [],
			articleTableDataList: [],
			//知识详情
			learnArticleDetail: {},
			//知识详情弹窗
			articledetail: false,
			articledetail1: false,
			//学习包id
			learningBackage: "",
			//学习包详情弹窗
			learnShow: false,
			//学习包详情回显
			updateLearnObj: {},
			//学习包详情文章回显
			circleDynamicListObj: [],
			// 知识库文章回显
			knowledgeObj: {},
			//知识库文章回显没有时间，新建时间参数
			newTime: "",
			// 新建文章
			formForm: {
				dynamicType: 1
			},
			formOption: {
				labelPosition: "right",
				labelSuffix: "：",
				labelWidth: 180,
				// gutter: 0,
				// menuBtn: true,
				submitBtn: true,
				// submitText: '提交',
				// emptyBtn: true,
				// emptyText: '清空',
				// menuPosition: 'center',
				column: [
					{
						label: "文章类型",
						prop: "dynamicType",
						type: "radio",
						span: 24,
						// editDisabled: true,
						dicData: [
							{
								label: "文章",
								value: 1
							},
							{
								label: "视频",
								value: 2
							},
							{
								label: "音频",
								value: 3
							},
							{
								label: "文件",
								value: 5
							},
							{
								label: "知识库文章",
								value: 4
							},
						],
						rules: [
							{
								required: true,
								message: "请选择文章类型",
								trigger: "blur"
							}
						]
					},

					{
						type: "input",
						label: "知识库文章",
						cascaderItem: [],
						hide: true,
						clearable: true,
						span: 24,
						display: true,
						props: {
							label: "name",
							value: "id"
						},
						prop: "knowledge",
						/*  dicUrl: '/circledynamic/knowledge/list?name={{key}}',
						// remote: true,
						filterable: true,
						rules: [{
						  required: true,
						  message: "请选择知识库文章",
						  trigger: "blur"
					  }],
					  change:function(val){
						let id = val.value
						if(id){
						  axios.get('/circledynamic/detailsByid/'+id).then(res=>{
						  vm.$nextTick(()=>{
							vm.knowledgeObj = res.data.data
							console.log(vm.knowledgeObj)
						  })
						})
						}

					  }, */
						click: function () {
							vm.articleTableDialog = true;
						}
					},

					{
						span: 24,
						label: "标题",
						prop: "title",
						display: true,
						rules: [{required: true, message: "请输入标题"}]
					},
					{
						span: 22,
						label: "文章分类",
						prop: "dynamicClass",
						type: "select",
						search: true,
						hide: true,
						dicUrl: "/circledynamicclass/list",
						props: {
							label: "name",
							value: "id"
						},
						rules: [
							{
								required: true,
								message: "请选择知识分类",
								trigger: "blur"
							}
						]
					},
					{
						type: "switch",
						label: "是否可复制(下载)",
						labelWidth: 180,
						prop: "isCopy",
						span: 24,
						// display: false,
						value: 1,
						slot: true,
						rules: [
							{
								required: true,
								message: "请选择是否可复制(下载)",
								trigger: "blur"
							}
						],
						dicData: [
							{
								label: "禁止",
								value: 2
							},
							{
								label: "允许",
								value: 1
							}
						]
					},
					{
						span: 24,
						type: "upload",
						label: "视频封面",
						prop: "cover",
						display: false,
						hide: true,
						listType: "picture-img",
						accept: ["image/png", "image/jpeg"],
						action: "/fastfile/upload/hsh-1251035051",
						fileSize: 500000,
						dataType: "string",
						propsHttp: {
							res: "data",
							url: "kpath"
						},
						// showFileList: true,
						rules: [
							{
								required: true,
								message: "请上传视频封面",
								trigger: "blur"
							}
						],
						tip: "只能上传jpg/png文件，且不超过500kb"
					},
					{
						label: "视频上传",
						prop: "video",
						span: 24,
						type: "upload",
						display: false,
						editDisabled: true,
						hide: true,
						listType: "picture-img",
						accept: ["video/mp4", "video/3gp"],
						//multiple: true,
						action: "/fastfile/upload/hsh-1251035051",
						//multiple: true,
						// fileSize: 500000,
						dataType: "string",
						propsHttp: {
							res: "data",
							url: "kpath"
						},
						// showFileList: true,
						limit: 1,
						rules: [
							{
								required: true,
								message: "请上传视频",
								trigger: "blur"
							}
						],
						tip: "建议上传格式：mp4、3gp,视频建议上传尺寸：750*422、1920*1080"
					},

					{
						label: "音频上传",
						prop: "audio",
						span: 24,
						// formslot: true,
						display: false,
						// hide: true,
						editDisabled: true,
						type: "upload",
						hide: true,
						// listType: 'picture-img',
						accept: ["audio/m4a", "audio/wav", "audio/mp3", "audio/aac"],
						action: "/fastfile/upload/hsh-1251035051",
						// multiple: true,
						// fileSize: 500000,
						dataType: "string",
						limit: 1,
						propsHttp: {
							res: "data",
							url: "kpath",
							name: "kpath"
						},
						showFileList: true,
						rules: [
							{
								required: true,
								message: "请上传音频",
								trigger: "blur"
							}
						],
						tip: "建议上传格式：m4a、wav、mp3、aac"
					},
					{
						label: '文件上传',
						prop: 'largefile',
						span: 24,
						// formslot: true,
						display: false,
						hide: true,
						editDisabled: true,
						type: "upload",
						// listType: 'picture-img',
						accept: ["largefile/pptx", "largefile/pdf", "largefile/xlsx", "largefile/doc", "largefile/docx"],
						action: "/fastfile/upload/hsh-1251035051",
						// multiple: true,
						// fileSize: 500000,
						dataType: "string",
						limit: 1,
						propsHttp: {
							res: "data",
							url: "kpath",
							name: 'kpath'
						},
						showFileList: true,
						rules: [{
							required: true,
							message: "请上传文件",
							trigger: "blur"
						}],
						tip: "建议上传格式:pptx、pdf、xlsx、doc、docx",
					},
					{
						label: "音视频简介",
						prop: "introduction",
						display: false,
						labelWidth: 180,
						hide: true,
						type: "textarea",
						rules: [
							{
								required: true,
								message: "请输入音视频简介",
								trigger: "blur"
							}
						],
						minRows: 10,
						// maxlength: 140,
						span: 24,
						showWordLimit: true
					},
					{
						type: "input",
						component: "AvueUeditor",
						label: "知识详情",
						span: 24,
						display: true,
						prop: "content",
						// upload: {
						// //普通图片上传
						//   action: "/fastfile/upload/hsh-1251035051",
						//   fileSize: 500000,
						//   props: {
						//     res: "data",
						//     url: 'kpath'
						//   }
						// },
						params: {
							options: {
								//普通图片上传
								action: "/fastfile/upload/hsh-1251035051",
								customConfig: {}, //wangEditor编辑的配置
								fileSize: 500000,
								props: {
									res: "data",
									url: "kpath"
								}
							}
						},
						rules: [
							{
								required: true,
								message: "请输入详情",
								trigger: "blur"
							}
						]
					},
					{
						type: "number",
						label: "最低阅读时长",
						controls: true,
						span: 12,
						display: true,
						prop: "time",
						required: true,
						rules: [
							{
								required: true,
								message: "最低阅读时长必须填写"
							}
						],
						placeholder: "请输入时长（分钟）"
					}
				]
			},

			upHeader: {
				Authorization: "Bearer " + store.getters.access_token
			},
			// 新建文章结束
			formOption1: {
				labelPosition: "right",
				labelSuffix: "：",
				labelWidth: 180,
				// gutter: 0,
				// menuBtn: true,
				submitBtn: true,
				// submitText: '提交',
				// emptyBtn: true,
				// emptyText: '清空',
				// menuPosition: 'center',
				column: [
					{
						label: "文章类型",
						prop: "dynamicType",
						type: "radio",
						span: 24,
						// editDisabled: true,
						dicData: [
							{
								label: "文章",
								value: 1
							},
							{
								label: "视频",
								value: 2
							},
							{
								label: "音频",
								value: 3
							},
							{
								label: "文件",
								value: 5
							},
							{
								label: "知识库文章",
								value: 4
							}
						],
						rules: [
							{
								required: true,
								message: "请选择文章类型",
								trigger: "blur"
							}
						]
					},

					{
						type: "select",
						label: "知识库文章",
						cascaderItem: [],
						hide: true,
						clearable: true,
						span: 24,
						display: true,
						props: {
							label: "name",
							value: "id"
						},
						prop: "knowledge",
						dicUrl: "/circledynamic/knowledge/list?name={{key}}",
						// remote: true,
						filterable: true,
						rules: [
							{
								required: true,
								message: "请选择知识库文章",
								trigger: "blur"
							}
						],
						change: function (val) {
							let id = val.value;
							if (id) {
								axios.get("/circledynamic/detailsByid/" + id).then(res => {
									vm.$nextTick(() => {
										vm.knowledgeObj = res.data.data;
										console.log(vm.knowledgeObj);
									});
								});
							}
						}
					},

					{
						span: 24,
						label: "标题",
						prop: "title",
						display: true,
						rules: [{required: true, message: "请输入标题"}]
					},
					{
						span: 22,
						label: "文章分类",
						prop: "dynamicClass",
						type: "select",
						search: true,
						hide: true,
						dicUrl: "/circledynamicclass/list",
						props: {
							label: "name",
							value: "id"
						},
						rules: [
							{
								required: true,
								message: "请选择知识分类",
								trigger: "blur"
							}
						]
					},
					{
						type: "switch",
						label: "是否可复制(下载)",
						labelWidth: 180,
						prop: "isCopy",
						span: 24,
						// display: false,
						value: 1,
						slot: true,
						rules: [
							{
								required: true,
								message: "请选择是否可复制(下载)",
								trigger: "blur"
							}
						],
						dicData: [
							{
								label: "禁止",
								value: 2
							},
							{
								label: "允许",
								value: 1
							}
						]
					},
					{
						span: 24,
						type: "upload",
						label: "视频封面",
						prop: "cover",
						display: false,
						hide: true,
						listType: "picture-img",
						accept: ["image/png", "image/jpeg"],
						action: "/fastfile/upload/hsh-1251035051",
						fileSize: 500000,
						dataType: "string",
						propsHttp: {
							res: "data",
							url: "kpath"
						},
						// showFileList: true,
						rules: [
							{
								required: true,
								message: "请上传视频封面",
								trigger: "blur"
							}
						],
						tip: "只能上传jpg/png文件，且不超过500kb"
					},
					{
						label: "视频上传",
						prop: "video",
						span: 24,
						type: "upload",
						display: false,
						// hide: true,
						editDisabled: true,
						hide: true,
						listType: "picture-img",
						accept: ["video/mp4", "video/3gp"],
						//multiple: true,
						action: "/fastfile/upload/hsh-1251035051",
						//multiple: true,
						// fileSize: 500000,
						dataType: "string",
						propsHttp: {
							res: "data",
							url: "kpath"
						},
						// showFileList: true,
						limit: 1,
						rules: [
							{
								required: true,
								message: "请上传视频",
								trigger: "blur"
							}
						],
						tip: "建议上传格式：mp4、3gp,视频建议上传尺寸：750*422、1920*1080"
					},

					{
						label: "音频上传",
						prop: "audio",
						span: 24,
						// formslot: true,
						display: false,
						editDisabled: true,
						type: "upload",
						hide: true,
						// listType: 'picture-img',
						accept: ["audio/m4a", "audio/wav", "audio/mp3", "audio/aac"],
						action: "/fastfile/upload/hsh-1251035051",
						// multiple: true,
						// fileSize: 500000,
						dataType: "string",
						limit: 1,
						propsHttp: {
							res: "data",
							url: "kpath",
							name: "kpath"
						},
						showFileList: true,
						rules: [
							{
								required: true,
								message: "请上传音频",
								trigger: "blur"
							}
						],
						tip: "建议上传格式：m4a、wav、mp3、aac"
					},
					{
						label: '文件上传',
						prop: 'largefile',
						span: 24,
						// formslot: true,
						display: false,
						hide: true,
						editDisabled: true,
						type: "upload",
						// listType: 'picture-img',
						accept: ["largefile/pptx", "largefile/pdf", "largefile/xlsx", "largefile/doc", "largefile/docx"],
						action: "/fastfile/upload/hsh-1251035051",
						// multiple: true,
						// fileSize: 500000,
						dataType: "string",
						limit: 1,
						propsHttp: {
							res: "data",
							url: "kpath",
							name: 'kpath'
						},
						showFileList: true,
						rules: [{
							required: true,
							message: "请上传文件",
							trigger: "blur"
						}],
						tip: "建议上传格式:pptx、pdf、xlsx、doc、docx",
					},
					{
						label: "音视频简介",
						prop: "introduction",
						display: false,
						labelWidth: 180,
						hide: true,
						type: "textarea",
						rules: [
							{
								required: true,
								message: "请输入音视频简介",
								trigger: "blur"
							}
						],
						minRows: 10,
						maxlength: 140,
						span: 24,
						showWordLimit: true
					},
					{
						type: "input",
						component: "AvueUeditor",
						label: "知识详情",
						span: 24,
						display: true,
						prop: "content",
						// upload: {
						// //普通图片上传
						//   action: "/fastfile/upload/hsh-1251035051",
						//   fileSize: 500000,
						//   props: {
						//     res: "data",
						//     url: 'kpath'
						//   }
						// },
						params: {
							options: {
								//普通图片上传
								action: "/fastfile/upload/hsh-1251035051",
								customConfig: {}, //wangEditor编辑的配置
								fileSize: 500000,
								props: {
									res: "data",
									url: "kpath"
								}
							}
						},
						rules: [
							{
								required: true,
								message: "请输入详情",
								trigger: "blur"
							}
						]
					},
					{
						type: "number",
						label: "最低阅读时长",
						controls: true,
						span: 12,
						display: true,
						prop: "time",
						required: true,
						rules: [
							{
								required: true,
								message: "最低阅读时长必须填写"
							}
						],
						placeholder: "请输入时长（分钟）"
					}
				]
			},

			ruleForm: {
				cover: "",
				name: "",
				introduction: "",
				isSort: "",
				close: ""
			},
			rules: {
				name: [{required: true, message: "请输入名称", trigger: "blur"}],

				introduction: [
					{required: true, message: "请填写简介", trigger: "blur"},
					{min: 1, max: 140, message: "最多输入140个字符", trigger: "blur"}
				],
				isSort: [
					{required: true, message: "请选择是否必填", trigger: "blur"}
				],
				time: [
					{required: true, message: "请输入最低阅读时间", trigger: "blur"},
					{type: "number", message: "阅读时长必须为数字值"}
				]
			},
			dialogVisible: false,
			option1: [
				{
					label: "",
					options: [
						{
							value: "",
							label: ""
						}
					],
					value: ""
				}
			],
			dialogShow1: false,
			dialogShow: false,
			//新建页搜索
			title: "",
			ttribute: "",
			value2: "",
			//
			//   内容页搜索
			name: "",
			value1: "",
			startTime: "",
			//学习包列表分页
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10 // 每页显示多少条
			},
			//新增学习包新增知识库文章表格分页
			page1: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10 // 每页显示多少条
			},
			list: [],
			articleForm: {},
			searchForm: {},
			tableData: [],
			articleTableLoading: false,
			tableLoading: false,
			tableOption: tableOption,
			articleObj: {
				data: []
			},
			learnObj: {
				circleDynamicList: []
			},
			time: 0
		};
	},
	watch: {
		"formForm.dynamicType": {
			handler(val) {
				var title = this.findObject(this.formOption.column, "title");
				var video = this.findObject(this.formOption.column, "video");
				var audio = this.findObject(this.formOption.column, "audio");
				var introduction = this.findObject(
					this.formOption.column,
					"introduction"
				);
				var content = this.findObject(this.formOption.column, "content");
				var cover = this.findObject(this.formOption.column, "cover");
				var time = this.findObject(this.formOption.column, "time");
				var isCopy = this.findObject(this.formOption.column, "isCopy");
				var knowledge = this.findObject(this.formOption.column, "knowledge");
				var dynamicClass = this.findObject(
					this.formOption.column,
					"dynamicClass"
				);
				var title = this.findObject(this.formOption.column, "title");
				var largefile = this.findObject(this.formOption.column, "largefile")
				if (val === 1) {
					title.display = true;
					video.display = false;
					audio.display = false;
					introduction.display = false;
					content.display = true;
					cover.display = false;
					time.display = true;
					isCopy.display = true;
					knowledge.display = false;
					dynamicClass.display = true;
					largefile.display = false;
					this.formForm.video = "";
					this.formForm.audio = "";
				}
				if (val === 2) {
					video.display = true;
					audio.display = false;
					introduction.display = true;
					content.display = false;
					cover.display = true;
					time.display = false;
					isCopy.display = true;
					knowledge.display = false;
					title.display = true;
					dynamicClass.display = true;
					largefile.display = false;
					this.formForm.audio = "";
				}
				if (val === 3) {
					video.display = false;
					audio.display = true;
					introduction.display = true;
					content.display = false;
					cover.display = false;
					time.display = false;
					isCopy.display = false;
					knowledge.display = false;
					title.display = true;
					dynamicClass.display = true;
					largefile.display = false;
					this.formForm.video = "";
				}
				if (val === 4) {
					video.display = false;
					audio.display = false;
					introduction.display = false;
					content.display = false;
					cover.display = false;
					time.display = false;
					isCopy.display = false;
					dynamicClass.display = false;
					title.display = false;
					knowledge.display = true;
					largefile.display = false;
				}
				if (val === 5) {
					video.display = false;
					audio.display = false;
					introduction.display = false;
					content.display = true;
					cover.display = false;
					time.display = false;
					isCopy.display = false;
					dynamicClass.display = true;
					title.display = true;
					largefile.display = true;
					knowledge.display = false;
				}
			},
			immediate: true
		},
		"learnArticleDetail.dynamicType": {
			handler(val) {
				var title = this.findObject(this.formOption1.column, "title");
				var video = this.findObject(this.formOption1.column, "video");
				var audio = this.findObject(this.formOption1.column, "audio");
				var introduction = this.findObject(
					this.formOption1.column,
					"introduction"
				);
				var content = this.findObject(this.formOption1.column, "content");
				var cover = this.findObject(this.formOption1.column, "cover");
				var time = this.findObject(this.formOption1.column, "time");
				var isCopy = this.findObject(this.formOption1.column, "isCopy");
				var knowledge = this.findObject(this.formOption1.column, "knowledge");
				var dynamicClass = this.findObject(
					this.formOption1.column,
					"dynamicClass"
				);
				var title = this.findObject(this.formOption1.column, "title");
				var radio = this.findObject(this.formOption1.column, "dynamicType");
				var largefile = this.findObject(this.formOption1.column, "largefile")
				radio.disabled = true;
				if (val === 1) {
					title.display = true;
					video.display = false;
					audio.display = false;
					introduction.display = false;
					content.display = true;
					cover.display = false;
					time.display = true;
					isCopy.display = true;
					knowledge.display = false;
					this.formForm.video = "";
					this.formForm.audio = "";
				}
				if (val === 2) {
					video.display = true;
					audio.display = false;
					introduction.display = true;
					content.display = false;
					cover.display = true;
					time.display = false;
					isCopy.display = true;
					knowledge.display = false;
					title.display = true;
					this.formForm.audio = "";
				}
				if (val === 3) {
					video.display = false;
					audio.display = true;
					introduction.display = true;
					content.display = false;
					cover.display = false;
					time.display = false;
					isCopy.display = false;
					knowledge.display = false;
					title.display = true;
					this.formForm.video = "";
				}
				if (val === 4) {
					video.display = false;
					audio.display = false;
					introduction.display = false;
					content.display = false;
					cover.display = false;
					time.display = false;
					isCopy.display = false;
					dynamicClass.display = false;
					title.display = false;
					knowledge.display = true;
				}
				if (val === 5) {
					video.display = false;
					audio.display = false;
					introduction.display = false;
					content.display = true;
					cover.display = false;
					time.display = false;
					isCopy.display = false;
					dynamicClass.display = true;
					title.display = true;
					largefile.display = true;
					knowledge.display = false;
				}
			},
			immediate: true
		},

		"articleForm.dynamicType": {
			handler(val) {
				var title = this.findObject(
					this.articleTableDataOption.column,
					"title"
				);
				var video = this.findObject(
					this.articleTableDataOption.column,
					"video"
				);
				var audio = this.findObject(
					this.articleTableDataOption.column,
					"audio"
				);
				var introduction = this.findObject(
					this.articleTableDataOption.column,
					"introduction"
				);
				var content = this.findObject(
					this.articleTableDataOption.column,
					"content"
				);
				var cover = this.findObject(
					this.articleTableDataOption.column,
					"cover"
				);
				var time = this.findObject(this.articleTableDataOption.column, "time");
				var isCopy = this.findObject(
					this.articleTableDataOption.column,
					"isCopy"
				);
				// var knowledge = this.findObject(this.articleTableDataOption.column, 'knowledge')
				var dynamicClass = this.findObject(
					this.articleTableDataOption.column,
					"dynamicClass"
				);
				var title = this.findObject(
					this.articleTableDataOption.column,
					"title"
				);
				var largefile = this.findObject(this.articleTableDataOption.column, "largefile")
				if (val === 1) {
					title.display = true;
					video.display = false;
					audio.display = false;
					introduction.display = false;
					content.display = true;
					cover.display = false;
					time.display = true;
					isCopy.display = true;
				}
				if (val === 2) {
					video.display = true;
					audio.display = false;
					introduction.display = true;
					content.display = false;
					cover.display = true;
					time.display = false;
					isCopy.display = true;
					title.display = true;
				}
				if (val === 3) {
					video.display = false;
					audio.display = true;
					introduction.display = true;
					content.display = false;
					cover.display = false;
					time.display = false;
					isCopy.display = false;
					title.display = true;
				}
				if (val === 5) {
					video.display = false;
					audio.display = false;
					introduction.display = false;
					content.display = true;
					cover.display = false;
					time.display = false;
					isCopy.display = false;
					dynamicClass.display = true;
					title.display = true;
					largefile.display = true;
					knowledge.display = false;
				}
				/* if(val===4){
					  video.display = false;
					  audio.display = false;
					  introduction.display = false;
					  content.display = false;
					  cover.display = false;
					  time.display = false;
					  isCopy.display = false;
					  dynamicClass.display = false
					  title.display = false
					  knowledge.display = true
					} */
			},
			immediate: true
		}
	},
	computed: {
		...mapGetters(["permissions"]),
		permissionList() {
			return {
				addBtn: this.vaildData(
					this.permissions.circleLearningBackage_circlelearningbackage_add,
					false
				),
				delBtn: this.vaildData(
					this.permissions.circleLearningBackage_circlelearningbackage_del,
					false
				),
				editBtn: this.vaildData(
					this.permissions.circleLearningBackage_circlelearningbackage_edit,
					false
				)
			};
		},
		uploadDisabled: function () {
			return this.ruleForm.cover.length > 0;
		}
	},
	mounted(page, params) {
		//新增学习包新增知识库文章表格数据
		/*  axios.get('/circledynamic/page1').then(res=>{
		  console.log(res)
		  this.articleTableData = res.data.data.records
		}) */

		var radio = this.findObject(this.formOption.column, "dynamicType");
		var audio = this.findObject(this.formOption.column, "audio");
		var video = this.findObject(this.formOption.column, "video");
		video.uploadAfter = (res, done, loading, column) => {
			// console.log(res, column);
			// console.log(this.value1)
			this.formForm.time = res.ls;
			// this.time = res.ls;
			done();
		};
		audio.uploadAfter = (res, done, loading, column) => {
			console.log(res, column);
			this.formForm.time = res.ls;
			// this.time = res.ls;
			done();
		};
		fetchList(
			Object.assign(
				{
					current: this.page.currentPage,
					size: this.page.pageSize
				},
				params,
				this.searchForm
			)
		).then(response => {
			this.list = response.data.data.records;
			this.page.total = response.data.data.total;
		});
		axios.get("/circleorganizational/page/list/user").then(res => {
			var vm = this;
			let circleorganizational = res.data.data.circleOrganizationalVoList;

			if (circleorganizational) {
				let userArrOption = [];
				circleorganizational.map(r => {
					var userArr = r.userVoList;
					if (userArr) {
						userArr.map(res => {
							userArrOption.push({
								label: res.name,
								value: res.id,
								id: res.id
							});
							return res;
						});
					}
					return r;
				});
				vm.option1 = userArrOption;
			}
		});
	},
	methods: {
		dialogVisibleClick() {
			this.dialogVisible = true;
			this.articleObj.data = [];
		},
		// 选中表格的值
		selectionChange(data) {
			console.log(data);
			var vm = this;
			var circleDynamicListObj = vm.circleDynamicListObj;
			var idsArr = "";
			data.map(res => {
				idsArr = res.id;
			});
			if (circleDynamicListObj != []) {
				circleDynamicListObj.map(r => {
					if (idsArr == r.id) {
						vm.$message.error("所选知识已在学习包中,将不会提交到课程信息中");
					}
				});
			}
			this.articleTableDataList = data;
		},
		// 清空选中表格的值
		toggleSelection(val) {
			if (val) {
				this.$refs.crud.toggleSelection(val);
			}
			this.$refs.crud.toggleSelection(val);
		},
		// 确定按钮
		articleTable(val) {
			var vm = this;
			vm.dialogShow = false;
			vm.dialogShow1 = false;
			var articleObj = vm.articleObj.data || [];
			var circleDynamicListObj = vm.circleDynamicListObj || [];
			var articleTableDataList = vm.articleTableDataList;
			articleObj = articleObj.concat(articleTableDataList);
			// articleObj.push(...articleTableDataList)

			var idsArr = [];
			var circleArr = [];
			if (circleDynamicListObj != []) {
				circleDynamicListObj.map(res => {
					// idsArr = res.id
					idsArr.push(res.id);
				});
			}
			if (articleTableDataList != []) {
				articleTableDataList.map(r => {
					if (idsArr.indexOf(r.id) === -1) {
						circleArr.push(r);
					}
				});
			}
			circleDynamicListObj = circleDynamicListObj.concat(circleArr);

			vm.circleDynamicListObj = circleDynamicListObj;
			vm.articleObj.data = articleObj;
			vm.articleTableDialog = false;
			vm.toggleSelection();
			vm.articleTableDataList = [];
		},
		articleTabledia(done) {
			var vm = this;
			vm.toggleSelection();
			vm.articleTableDataList = [];
			done();
		},
		closedialog5(done) {
			if (this.dialogFlag2 == true) {
				done()
			}
			if (this.dialogFlag2 == false) {
				this.$confirm("可能有未保存的数据，是否关闭", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(data => {
					var vm = this;
					// vm.toggleSelection()
					vm.articleTableDataList = [];
					done();
				}).catch(_ => {
					// done()
				});
			}
		},
		// 新增学习包关闭dialog清空表单
		closedialog(done, type) {
			if (this.dialogFlag == true) {
				done()
			}
			if (this.dialogFlag == false) {
				this.$confirm("可能有未保存的数据，是否关闭", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(data => {
					var vm = this;
					vm.articleObj = {};
					vm.ruleForm = {};
					vm.ruleForm.cover = "";
					// vm.$refs.form1.resetFields();
					vm.articleTableDataList = [];
					done();
				}).catch(_ => {
					// done()
				});
			}

		},
		//新增学习包下新增文章关闭dialog清空表单
		closedialog1(done, type) {
			if (this.dialogFlag1 == true) {
				done()
			}
			if (this.dialogFlag1 == false) {
				this.$confirm("可能有未保存的数据，是否关闭", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(data => {
					var vm = this;
					vm.formForm = {};
					vm.knowledgeObj = {};
					// vm.$refs.form4.resetFields();
					vm.articleTableDataList = [];
					done();
				}).catch(_ => {
					// done()
				});
			}
		},
		//修改学习包下新增文章关闭dialog清空表单
		closedialog2(done) {
			if (this.dialogFlag3 == true) {
				done()
			}
			if (this.dialogFlag3 == false) {
				this.$confirm("可能有未保存的数据，是否关闭", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(data => {
					var vm = this;
					vm.learnArticleDetail = {};
					vm.knowledgeObj = {};
					// vm.$refs.form6.resetFields();
					vm.articleTableDataList = [];
					done();
				}).catch(_ => {
					// done()
				});
			}
		},
		closedialog3(done) {
			if (this.dialogFlag4 == true) {
				done()
			}
			if (this.dialogFlag4 == false) {
				this.$confirm("可能有未保存的数据，是否关闭", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(data => {
					var vm = this;
					vm.learnArticleDetail = {};
					vm.knowledgeObj = {};
					// vm.$refs.form6.resetFields();
					vm.articleTableDataList = [];
					done();
				}).catch(_ => {
					// done()
				});
			}
		},
		dragstart(val) {
			this.oldVal = val;
			this.isActive = val;
		},
		dragend(val) {
			if (val) {
				if (this.oldVal != this.newOld) {
					let oldIndex = this.articleObj.data.indexOf(this.oldVal);
					let newIndex = this.articleObj.data.indexOf(this.newOld);
					let newItems = [...this.articleObj.data];
					// 删除老的节点
					newItems.splice(oldIndex, 1);
					// 增加新的节点
					newItems.splice(newIndex, 0, this.oldVal);
					// items结构发生变化触发transition-group的动画
					this.articleObj.data = [...newItems];
					this.isActive = -1;
				}
			}
			/* if (this.oldVal != this.newOld) {
				  let oldIndex = this.articleObj.data.indexOf(this.oldVal);
				  let newIndex = this.articleObj.data.indexOf(this.newOld);
				  let newItems = [...this.articleObj.data];
				  // 删除老的节点
				  newItems.splice(oldIndex, 1);
				  // 增加新的节点
				  newItems.splice(newIndex, 0, this.oldVal);
				  // items结构发生变化触发transition-group的动画
				  this.articleObj.data = [...newItems];
				  this.isActive = -1;
			  } */
		},
		// 记录移动过程中信息
		dragenter(val) {
			this.newOld = val;
		},

		dragstart1(val) {
			this.oldVal1 = val;
			this.isActive1 = val;
		},
		dragend1(val) {
			if (val) {
				if (this.oldVal1 != this.newOld1) {
					let oldIndex = this.circleDynamicListObj.indexOf(this.oldVal1);
					let newIndex = this.circleDynamicListObj.indexOf(this.newOld1);
					let newItems = [...this.circleDynamicListObj];
					// 删除老的节点
					newItems.splice(oldIndex, 1);
					// 增加新的节点
					newItems.splice(newIndex, 0, this.oldVal1);
					// items结构发生变化触发transition-group的动画
					this.circleDynamicListObj = [...newItems];
					console.log(this.circleDynamicListObj);
					this.updateLearnObj.circleDynamicList = this.circleDynamicListObj;
					this.isActive1 = -1;
				}
			}
			/* if (this.oldVal1 != this.newOld1) {
				  let oldIndex = this.circleDynamicListObj.indexOf(this.oldVal1);
				  let newIndex = this.circleDynamicListObj.indexOf(this.newOld1);
				  let newItems = [...this.circleDynamicListObj];
				  // 删除老的节点
				  newItems.splice(oldIndex, 1);
				  // 增加新的节点
				  newItems.splice(newIndex, 0, this.oldVal1);
				  // items结构发生变化触发transition-group的动画
				  this.circleDynamicListObj = [...newItems];
				  console.log(this.circleDynamicListObj)
				  this.updateLearnObj.circleDynamicList = this.circleDynamicListObj
				  this.isActive1 = -1;
			  } */
		},
		// 记录移动过程中信息
		dragenter1(val) {
			this.newOld1 = val;
		},

		lookArticle(e, val) {
			var vm = this;
			vm.articleIndex = e.currentTarget.id;
			vm.articledetail = true;
			vm.learnArticleDetail = val;
			val.id ? "" : (vm.learnArticleDetail.id = null);
			val.circleCompanyList = '' ? (val.circleCompanyList = null) : val.circleCompanyList
			val.circleDynamicCommentList = '' ? (val.circleDynamicCommentList = null) : val.circleDynamicCommentList
			val.circleDynamicViews = '' ? (val.circleDynamicViews = null) : val.circleDynamicViews
			val.circleUser = '' ? (val.circleUser = null) : val.circleUser
			val.circleUserList = '' ? (val.circleUserList = null) : val.circleUserList
			val.collectionNum = '' ? (val.collectionNum = null) : val.collectionNum
			val.collectionStatus = '' ? (val.collectionStatus = null) : val.collectionStatus
			val.commentNum = '' ? (val.commentNum = null) : val.commentNum
			val.content = '' ? (val.content = null) : val.content
			val.cover = '' ? (val.cover = null) : val.cover
			val.createTime = '' ? (val.createTime = null) : val.createTime
			val.createTimeEnd = '' ? (val.createTimeEnd = null) : val.createTimeEnd
			val.createTimeStart = '' ? (val.createTimeStart = null) : val.createTimeStart
			val.dynamicClass = '' ? (val.dynamicClass = null) : val.dynamicClass
			val.dynamicClassName = '' ? (val.dynamicClassName = null) : val.dynamicClassName
			val.dynamicNumber = '' ? (val.dynamicNumber = null) : val.dynamicNumber
			val.dynamicType = '' ? (val.dynamicType = null) : val.dynamicType
			val.identity = '' ? (val.identity = null) : val.identity
			val.ids = '' ? (val.ids = null) : val.ids
			val.isCopy = '' ? (val.isCopy = null) : val.isCopy
			val.isSeeStatus = '' ? (val.isSeeStatus = null) : val.isSeeStatus
			val.ispraise = '' ? (val.ispraise = null) : val.ispraise
			val.knowledge = '' ? (val.knowledge = null) : val.knowledge
			if (typeof (val.largefile) != 'string') {
				val.largefile = ''
			}
			// val.largefile = [] ? (val.largefile = null) : val.largefile
			val.learningBackage = '' ? (val.learningBackage = null) : val.learningBackage
			val.pic = '' ? (val.pic = null) : val.pic
			val.time = '' ? (val.time = null) : val.time
			val.title = '' ? (val.title = null) : val.title
			val.uname = '' ? (val.uname = null) : val.uname
			val.video = '' ? (val.video = null) : val.video
			console.log(
				"---------------------------------------",
				vm.learnArticleDetail
			);
		},
		lookArticle1(e, val) {
			var vm = this;
			vm.articledetail1 = true;
			vm.learnArticleDetail = val;
			vm.articleIndex1 = e.currentTarget.id;
		},
		removeArticle1(val) {
			var vm = this;
			var articleObj = vm.articleObj.data;
			vm.$confirm("是否确认删除 ", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(function () {
					articleObj.splice(val, 1);
				})
				.then(data => {
					this.$message.success("删除成功");
				});
		},
		//删除文章
		removeArticle(e, item) {
			var vm = this;
			var circleDynamicListObj = vm.circleDynamicListObj;
			var id = item.id;
			if (id) {
				this.$confirm("是否确认删除 " + item.title, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
					.then(function () {
						axios
							.post(
								"/circlelearningbackage/details/delect?dynamic=" +
								id +
								"&learningBackage=" +
								vm.learningBackage
							)
							.then(res => {
								axios
									.get(
										"/circlelearningbackage/details?id=" + vm.learningBackage
									)
									.then(r => {
										vm.updateLearnObj = r.data.data;
										vm.circleDynamicListObj = r.data.data.circleDynamicList;
										console.log(vm.updateLearnObj);
									});
							});
					})
					.then(data => {
						this.$message.success("删除成功");
					});
			} else {
				var index = e.currentTarget.id;
				vm.$confirm("是否确认删除 ", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
					.then(function () {
						circleDynamicListObj.splice(index, 1);
					})
					.then(data => {
						this.$message.success("删除成功");
					});
			}
		},
		//删除学习包
		removeLearn(val, params, page) {
			var vm = this;
			var id = val.id;
			console.log(id)
			if (id) {
				vm.$confirm("是否确认删除 " + val.name, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function () {
					axios
						.delete("/circlelearningbackage/ " + id)
						.then(r => {
							fetchList(
								Object.assign(
									{
										current: vm.page.currentPage,
										size: vm.page.pageSize
									},
									params,
									vm.searchForm
								)
							).then(response => {
								vm.list = response.data.data.records;
								vm.page.total = response.data.data.total;
							});
						})
						.then(data => {
							vm.$message.success("删除成功");
						});
				});
			}
		},
		//修改学习包
		updateLearn(val) {
			var vm = this;
			vm.learnShow = true;
			vm.learningBackage = val.id;
			var id = val.id;
			if (id) {
				axios.get("/circlelearningbackage/details?id=" + id).then(r => {
					vm.updateLearnObj = r.data.data;
					vm.circleDynamicListObj = r.data.data.circleDynamicList;
					console.log(vm.updateLearnObj);
				});
			}
		},
		//确认修改按钮
		updateSub(page, params) {
			var vm = this;
			vm.formLoading = true
			var articleObj = vm.articleObj.data;
			vm.updateLearnObj.circleDynamicList = vm.updateLearnObj.circleDynamicList.concat(articleObj);
			var articleObj1 = vm.updateLearnObj.circleDynamicList
			if (articleObj1) {
				articleObj1.map(res => {
					// res.largefile = [] ? "" : res.largefile
					if (typeof (res.largefile) != 'string') {
						res.largefile = ''
					}
				})
			}
			console.log(vm.updateLearnObj);
			axios.post("/circlelearningbackage", vm.updateLearnObj).then(res => {
				vm.dialogFlag2 = true
				vm.$message.success("修改成功！！");
				setTimeout(() => {
					vm.learnShow = false;
					vm.tableLoading = false;
					vm.formLoading = false
					fetchList(
						Object.assign(
							{
								current: vm.page.currentPage,
								size: vm.page.pageSize
							},
							params,
							vm.searchForm
						)
					).then(response => {
						vm.list = response.data.data.records;
						vm.page.total = response.data.data.total;
					});
				}, 200);
			});
			setTimeout(() => {
				vm.dialogFlag2 = false
			}, 500)
		},
		// 文章提交
		// 新建学习包下新建文章
		submit(data, done) {
			let vm = this;
			var cover = data.cover;
			if (cover.length == 0) {
				delete data.cover;
			}
			var knowledgeObj = vm.knowledgeObj;
			var articleObj = vm.articleObj.data;
			vm.tableLoading = true;
			if (!data.id) {
				if (data.dynamicType != 4) {
					articleObj.push(data);
					setTimeout(() => {
						vm.dialogFlag1 = true
						vm.$message.success("提交成功！！");
						vm.dialogShow = false;
						vm.tableLoading = false;
						vm.$refs.form4.resetForm();
						done();
					}, 200);
					vm.articleObj.data = articleObj;
				} else {
					if (vm.newTime) {
						vm.knowledgeObj.time = vm.newTime;
						setTimeout(() => {
							vm.dialogFlag1 = true
							vm.$message.success("提交成功！！");
							vm.dialogShow = false;
							vm.tableLoading = false;
							vm.$refs.form4.resetForm();
							done();
						}, 200);
						articleObj.push(knowledgeObj);
					} else if (vm.knowledgeObj.time) {
						setTimeout(() => {
							vm.dialogFlag1 = true
							vm.$message.success("提交成功！！");
							vm.dialogShow = false;
							vm.tableLoading = false;
							vm.$refs.form4.resetForm();
							done();
						}, 200);
						articleObj.push(vm.knowledgeObj);
					} else {
						vm.$message.error("最低阅读时长不能为空");
						vm.tableLoading = true;
						done();
					}
				}
				vm.articleObj.data = articleObj;
			} else {
				setTimeout(() => {
					vm.dialogFlag1 = true
					vm.$message.success("提交成功！！");
					vm.dialogShow = false;
					vm.tableLoading = false;
					vm.$refs.form4.resetForm();
					done();
				}, 200);
			}
			setTimeout(() => {
				vm.dialogFlag1 = false
			}, 500)
		},
		// 修改学习包下新建文章
		submit1(data, done) {
			let vm = this;
			var cover = data.cover;
			if (cover.length == 0) {
				delete data.cover;
			}
			var knowledgeObj = vm.knowledgeObj;
			var articleObj = vm.articleObj.data;
			var circleDynamicListObj = vm.circleDynamicListObj;
			vm.tableLoading = true;
			if (!data.id) {
				if (data.dynamicType != 4) {
					circleDynamicListObj.push(data);
					setTimeout(() => {
						vm.$message.success("提交成功！！");
						vm.dialogFlag3 = true
						vm.dialogShow1 = false;
						vm.tableLoading = false;
						vm.$refs.form6.resetForm();
						done();
					}, 200);
				} else {
					if (vm.newTime) {
						vm.knowledgeObj.time = vm.newTime;
						setTimeout(() => {
							vm.$message.success("提交成功！！");
							vm.dialogFlag3 = true
							vm.dialogShow1 = false;
							vm.tableLoading = false;
							vm.$refs.form6.resetForm();
							done();
						}, 200);
						circleDynamicListObj.push(knowledgeObj);
					} else if (vm.knowledgeObj.time) {
						setTimeout(() => {
							vm.dialogFlag3 = true
							vm.$message.success("提交成功！！");
							vm.dialogShow1 = false;
							vm.tableLoading = false;
							vm.$refs.form6.resetForm();
							done();
						}, 200);
						circleDynamicListObj.push(knowledgeObj);
					} else {
						vm.$message.error("最低阅读时长不能为空");
						vm.tableLoading = true;
						done();
					}
				}
				vm.circleDynamicListObj = circleDynamicListObj;
			} else {
				setTimeout(() => {
					vm.dialogFlag3 = true
					vm.$message.success("提交成功！！");
					vm.dialogShow1 = false;
					vm.tableLoading = false;
					vm.$refs.form6.resetForm();
					done();
				}, 200);
			}
			setTimeout(() => {
				vm.dialogFlag3 = false
			}, 500)
		},
		// 修改学习包下知识详情修改文章
		submit2(data, done) {
			console.log(
				"---------------------------------------22222",
				this.learnArticleDetail
			);
			let vm = this;
			var learnArticleDetail = vm.learnArticleDetail;
			var circleDynamicListObj = vm.circleDynamicListObj;
			vm.tableLoading = true;
			if (data.id) {
				axios
					.post(
						"/circlelearningbackage/details/add?learningBackage=" +
						vm.learningBackage,
						data
					)
					.then(r => {
						axios
							.get("/circlelearningbackage/details?id=" + vm.learningBackage)
							.then(r => {
								vm.updateLearnObj = r.data.data;
								vm.circleDynamicListObj = r.data.data.circleDynamicList;
								console.log(vm.updateLearnObj);
							});
						setTimeout(() => {
							vm.$message.success("修改成功！！");
							vm.dialogFlag4 = true
							vm.articledetail = false;
							vm.tableLoading = false;
							vm.$refs.form5.resetForm();
							vm.learnArticleDetail = {};
							done();
						}, 200);
					});
			} else if (data.dynamicType != 4) {
				circleDynamicListObj.push(data);
				circleDynamicListObj.splice(vm.articleIndex, 1);
				vm.circleDynamicListObj = circleDynamicListObj;
				setTimeout(() => {
					vm.$message.success("修改成功！！");
					vm.dialogFlag4 = true
					vm.articledetail = false;
					vm.tableLoading = false;
					vm.$refs.form5.resetForm();
					vm.learnArticleDetail = {};
					done();
				}, 200);
			} else {
				circleDynamicListObj.push(learnArticleDetail);
				if (vm.newTime) {
					vm.learnArticleDetail.time = vm.newTime;
				} else {
					setTimeout(() => {
						// vm.$message.error('最低阅读时长不能为空')
						vm.tableLoading = false;
						done();
					}, 200);
				}
				vm.circleDynamicListObj = circleDynamicListObj;
				setTimeout(() => {
					vm.dialogFlag4 = true
					vm.$message.success("修改成功！！");
					vm.articledetail = false;
					vm.tableLoading = false;
					vm.$refs.form5.resetForm();
					done();
				}, 200);
			}
			setTimeout(() => {
				vm.dialogFlag4 = false
			}, 500)
			/* setTimeout(() => {
				  vm.$message.success('修改成功！！')
				  vm.articledetail = false
				  vm.tableLoading = false;
				  vm.$refs.form3.resetForm();
				  done()
				}, 200) */
		},
		submit3(data, done) {
			var vm = this;
			var article = vm.articleObj.data;
			article.push(data);
			article.splice(vm.articleIndex1, 1);
			vm.articleObj.data = article;
			setTimeout(() => {
				vm.$message.success("修改成功！！");
				vm.articledetail1 = false;
				vm.tableLoading = false;
				vm.$refs.form3.resetForm();
				done();
			}, 400);
		},
		/* emptytChange(data){
			console.log("重置")
			  // this.$message.success('清空方法回调');
			}, */
		handleAvatarSuccess(res, file) {
			this.ruleForm.cover = res.data.kpath;
			this.updateLearnObj.cover = res.data.kpath
		},
		handleExceed(files, fileList) {
			this.$message.warning(
				`当前限制选择 1 个文件，本次选择了 ${files.length
				} 个文件，共选择了 ${files.length + fileList.length} 个文件`
			);
		},
		beforeAvatarUpload(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isLt2M) {
				this.$message.error("上传图片大小不能超过 2MB!");
			}
			return isLt2M;
		},
		onSubmit(page, params, done) {
			var vm = this;
			vm.loadingbut = true
			var articleObj = vm.articleObj.data;
			if (articleObj) {
				articleObj.map(res => {
					// res.largefile = [] ? "" : res.largefile
					if (typeof (res.largefile) != 'string') {
						res.largefile = ''
					}
				})
			}
			var ruleForm = vm.ruleForm;
			vm.tableLoading = true;
			vm.learnObj = ruleForm;
			vm.learnObj.circleDynamicList = articleObj;
			console.log(vm.learnObj);
			setTimeout(() => {
				if (
					(vm.learnObj.circleDynamicList.length != 0,
					vm.learnObj.name != "",
					vm.learnObj.introduction != "",
					vm.learnObj.isSort != "")
				) {

					axios.post("/circlelearningbackage", vm.learnObj).then(res => {
						vm.dialogFlag = true
						vm.$message.success("提交成功！！");
						vm.articleObj = [];
						// vm.$refs.form1.resetFields();
						vm.$refs.cover.clearFiles();
						vm.dialogVisible = false;
						vm.tableLoading = false;
						fetchList(
							Object.assign(
								{
									current: vm.page.currentPage,
									size: vm.page.pageSize
								},
								params,
								vm.searchForm
							)
						).then(response => {
							vm.list = response.data.data.records;
							vm.page.total = response.data.data.total;
						});
						vm.loadingbut = false
					});
					setTimeout(() => {
						vm.dialogFlag = false
					}, 500)
				} else if (vm.learnObj.circleDynamicList.length == 0) {
					vm.$message.error("请选择/新建课程");
				} else if (vm.learnObj.name == "") {
					vm.$message.error("请输入学习包名称");
				} else if (vm.learnObj.introduction == "") {
					vm.$message.error("请输入学习包简介");
				} else if (vm.learnObj.isSort == "") {
					vm.$message.error("请选择文章学习顺序");
				}
			}, 200);
			//  vm.articleObj = {}
			//  vm.ruleForm = {}
		},
		handleSizeChange(val) {
			this.page.pageSize = val;
			this.page.currentPage = 1;
			this.queryList();
		},
		handleCurrentChange(size) {
			this.page.currentPage = size;
			this.queryList();
		},
		queryList(page, params) {
			if (this.startTime) {
				var date = this.startTime[0];
				var date1 = this.startTime[1];

				var formatDate = function (date) {
					var y = date.getFullYear();
					var m = date.getMonth() + 1;
					m = m < 10 ? "0" + m : m;
					var d = date.getDate();
					d = d < 10 ? "0" + d : d;
					// var h = '00'
					// var minute = '00'
					// var second = '00'
					var h = date.getHours();
					h = h < 10 ? "0" + h : h;
					var minute = date.getMinutes();
					var second = date.getSeconds();
					second = second < 10 ? "0" + second : second;
					minute = minute < 10 ? "0" + minute : minute;
					return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
				};
			}
			if ((this.name == "") & (this.startTime == "") & (this.seach == "")) {
				fetchList(
					Object.assign(
						{
							current: this.page.currentPage,
							size: this.page.pageSize
						},
						params,
						this.searchForm
					)
				).then(response => {
					this.list = response.data.data.records;
					this.page.total = response.data.data.total;
				});
			} else if (this.startTime) {
				var ids = this.value1;
				this.list = [];
				// this.$axios
				//   .get(
				//     "/circlelearningbackage/page?" +
				//     "current=" +
				//     this.page.currentPage +
				//     "&size=" +
				//     this.page.pageSize,
				//     {
				//       params: {
				//         name: this.name,
				//         startTime: formatDate(date),
				//         endTime: formatDate(date1),
				//         userIds: ids.join(",")
				//       }
				//     }

				//   )
				//   .then(res => {
				//     this.list = res.data.data.records;
				//     this.page.total = res.data.data.total;
				//   });
				var params = {
					name: this.name,
					startTime: formatDate(date),
					endTime: formatDate(date1),
					userIds: ids.join(",")
				}
				fetchList(
					Object.assign(
						{
							current: this.page.currentPage,
							size: this.page.pageSize
						},
						params,
						this.searchForm
					)
				).then(res => {
					this.list = res.data.data.records;
					this.page.total = res.data.data.total;
				});
			} else {
				var ids = this.value1;
				this.list = [];
				// this.$axios
				//   .get(
				//     "/circlelearningbackage/page?" +
				//     "current=" +
				//     this.page.currentPage +
				//     "&size=" +
				//     this.page.pageSize,
				//     {
				//       params: {
				//         name: this.name,
				//         // userIds:this.value1,
				//         userIds: ids.join(",")
				//       }
				//     }
				//   )
				//   .then(res => {
				//     this.list = res.data.data.records;
				//     this.page.total = res.data.data.total;
				//   });
				var params = {
					name: this.name,
					userIds: ids.join(",")
				}
				fetchList(
					Object.assign(
						{
							current: this.page.currentPage,
							size: this.page.pageSize
						},
						params,
						this.searchForm
					)
				).then(res => {
					this.list = res.data.data.records;
					this.page.total = res.data.data.total;
				});
			}
		},

		/* getList(page, params) {
		  this.tableLoading = true;
		   fetchList(Object.assign({
						current: page.currentPage,
						size: page.pageSize
					}, params, this.searchForm )).then(response => {
						this.tableData = response.data.data.records
						this.page.total = response.data.data.total
						this.tableLoading = false
					}).catch(() => {
						this.tableLoading=false
					})
		},
		rowDel: function (row, index) {
					this.$confirm('是否确认删除ID为' + row.id, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(function () {
						return delObj(row.id)
					}).then(data => {
						this.$message.success('删除成功')
						this.getList(this.page)
					})
				},
				handleUpdate: function (row, index, done,loading) {
					putObj(row).then(data => {
						this.$message.success('修改成功')
						done()
						this.getList(this.page)
					}).catch(() => {
						loading();
					});
				},
				handleSave: function (row, done,loading) {
					addObj(row).then(data => {
						this.$message.success('添加成功')
						done()
						this.getList(this.page)
					}).catch(() => {
						loading();
					});
				},
				sizeChange(pageSize){
					this.page.pageSize = pageSize
				},
				currentChange(current){
					this.page.currentPage = current
				},
				searchChange(form, done) {
					this.searchForm = form
					this.page.currentPage = 1
					this.getList(this.page, form)
					done()
				},
				refreshChange() {
					this.getList(this.page)
				} */
		getList(page1, params) {
			this.articleTableLoading = true;
			fetchList1(
				Object.assign(
					{
						current: page1.currentPage,
						size: page1.pageSize
					},
					params,
					this.searchForm
				)
			)
				.then(response => {
					this.articleTableData = response.data.data.records;
					this.page1.total = response.data.data.total;
					this.articleTableLoading = false;
				})
				.catch(() => {
					this.articleTableLoading = false;
				});
		},
		sizeChange(pageSize) {
			this.page1.pageSize = pageSize;
		},
		currentChange(current) {
			this.page1.currentPage = current;
		}
	}
};
</script>
